<template>
  <div class="nav-bar">
    <el-menu default-active="1" router>
      <el-menu-item index="1" :route="{ name: 'file-rename' }">
        <div class="sub">
          <el-icon :size="18"><FileRenameIcon /></el-icon>
          <span class="text">文件重命名</span>
        </div>
      </el-menu-item>
      <el-menu-item index="2" :route="{ name: 'folder-rename' }">
        <div class="sub">
          <el-icon :size="18"><FolderRenameIcon /></el-icon>
          <span class="text">文件夹重命名</span>
        </div>
      </el-menu-item>
      <el-menu-item index="3" :route="{ name: 'file-time' }">
        <div class="sub">
          <el-icon :size="18"><FileDateIcon /></el-icon>
          <span class="text">文件时间属性</span>
        </div>
      </el-menu-item>
      <el-menu-item index="4" :route="{ name: 'folder-time' }">
        <div class="sub">
          <el-icon :size="18"><FolderDateIcon /></el-icon>
          <span class="text">文件夹时间属性</span>
        </div>
      </el-menu-item>
      <el-menu-item index="5" :route="{ name: 'extract-file' }">
        <div class="sub">
          <el-icon :size="18"><ExtractFileIcon /></el-icon>
          <span class="text">提取文件名称</span>
        </div>
      </el-menu-item>
      <el-menu-item index="6" :route="{ name: 'extract-folder' }">
        <div class="sub">
          <el-icon :size="18"><ExtractFolderIcon /></el-icon>
          <span class="text">提取文件夹名称</span>
        </div>
      </el-menu-item>
      <el-menu-item index="7" :route="{ name: 'batch-create-folder' }">
        <div class="sub">
          <el-icon :size="18"><BatchCreateFolderIcon /></el-icon>
          <span class="text">批量新建文件夹</span>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import FileRenameIcon from './Icon/FileRenameIcon.vue'
import FolderRenameIcon from './Icon/FolderRenameIcon.vue'
import FileDateIcon from './Icon/FileDateIcon.vue'
import FolderDateIcon from './Icon/FolderDateIcon.vue'
import ExtractFileIcon from './Icon/ExtractFileIcon.vue'
import ExtractFolderIcon from './Icon/ExtractFolderIcon.vue'
import BatchCreateFolderIcon from './Icon/BatchCreateFolderIcon.vue'
</script>

<style lang="less" scoped>
.el-menu {
  border-right: none;
}

.el-menu-item {
  display: block;
  height: auto;
  line-height: normal;
}

.nav-bar {
  box-sizing: border-box;
  border-right: 1px solid var(--el-border-color);
  width: 128px;
  height: 100%;

  .sub {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 76px;
    cursor: pointer;

    img {
      width: 20px;
      height: 20px;
    }

    .text {
      margin-top: 8px;
    }
  }
}
</style>
